<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/goods.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<title></title>
	</head>
	<body>
		<div id="app" style="display: flex;display: -webkit-flex;min-height: 100vh;flex-direction: column;">

			<header id="header" style="flex: 1;">
				<nav class="navbar navbar-expand-lg navbar-light bg-light">
					<div class="container-fluid">
						<a href="#" class="nav-logo navbar-brand">
							<img src="./public/images/M.png">
						</a>
						<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
						 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav me-auto mb-2 mb-lg-0">
								<li class="nav-item">
									<div class="nav_index">
										<a class="nav-link" aria-current="page" href="index.html">首页</a>
									</div>
								</li>
								<li>
									<my-short></my-short>
								</li>

							</ul>
							<div id="nav_right">
								
								<div id="nav_user">
									<a href="#">
										<i class="iconfont icon-shouye1"></i>
									</a>
								</div>
								<div id="nav_shoppingcart" class="float-right">
									<my-showcart></my-showcart>
								</div>
							</div>
						</div>
					</div>
				</nav>
			</header>
			<section id="goods" style="flex: 1;">
				<div class="container">
					<div class="goods_info">
						<my-cart></my-cart>
					</div>
				</div>
			</section>
			<section id="about">
				<div class="about_menu w-75 m-auto">
					<ul>
						<li>
							<h3>订单服务</h3>
							<div class="item-name">
								<a href="#">购买指南</a>
								<a href="#">送货政策</a>
							</div>
						</li>
						<li>
							<h3>服务支持</h3>
							<div class="item-name">
								<a href="#">零售门店</a>
								<a href="#">自助服务</a>
								<a href="#">维修门店</a>
							</div>
						</li>
						<li>
							<h3>媒体中心</h3>
							<div class="item-name">
								<a href="#">新闻动态</a>
								<a href="#">官方视频</a>
								<a href="#">图片资源</a>
							</div>
						</li>
						<li>
							<h3>关注我们</h3>
							<div class="item-name">
								<a href="#">新浪微博</a>
								<a href="#">官方微信</a>
								<a href="#">荣誉奖项</a>
							</div>
						</li>
					</ul>
					<div class="about_phone">
						<h1>400 - 603 - 5000</h1>
						<h2>周一到周日 9:00 - 18:00</h2>
						<h2>(仅收市话费)</h2>
						<div class="online">
							<a href="#">
								<i class="iconfont icon-0-02"></i>
								<span>在线帮助</span>
							</a>

						</div>
					</div>
				</div>
				<div class="about_info w-75 m-auto">
					<ul>
						<li style="border-left: #FFFFFF solid 1px;">Copyright C 2020 smartisan.com版权所有</li>
						<li>锤子商城隐私政策</li>
						<li>锤子商城用户协议</li>
						<li>资质证照</li>
					</ul>
					<ul>
						<li style="border-left: #FFFFFF solid 1px;">京ICP 备 19048576号-1</li>
						<li><i class="iconfont icon-0-12"></i>京公网安备11010502039854号</li>
						<li>京食药网食备202010031</li>
					</ul>
				</div>
			</section>
		</div>
		<script src="js/jquery3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<template id="goodslist_infos">
			<div style="display: flex;">
				<li class="nav-item" v-for='a in goodslist.slice(0,4)'>
					<div class="nav_rim">
						<a class="nav-link" href="#">{{a.cat_name}}</a>
						<div class="show_rim">
							<div class="container">
								<ul class="rim_info">
									<li class="costume" v-for='bb in a.children.slice(0,4)'>
										<h4 @click="xxx(bb.cat_id)">{{bb.cat_name}}</h4>
										<ul>
											<li v-for='ccc in bb.children' @click="xxx(ccc.cat_id)">
												<img :src="ccc.cat_icon" />
												<h5>{{ccc.cat_name}}</h5>

											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</li>
			</div>
		</template>

		<template id="goods_infos">
			<div class="row">
				<section class="col-3" v-for='a in list.goods' @click="tohtml(a.goods_id)">
					<img :src="a.goods_small_logo?a.goods_small_logo:'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'" />
					<div class="goods_title">
						<h3>{{a.goods_name}}</h3>
						<h5>{{a.info}}</h5>
					</div>
					<div class="price">
						<span>￥{{a.goods_price}}</span>
					</div>

				</section>
			</div>
		</template>

		<template id="goodscartlist_infos">
			<div @mouseover="mouseon()" @mouseout="mouseover()">
				<a href="shopcart.html">
					<i class="iconfont icon-shouye2"></i>
				</a>
				<div class="cartlist" v-show="cartflag">
					<div class="cartgoods" v-show="isfull">
						<div class="cartgoods_info" v-for="item in goodscartlist.message">
							<img :src="item.goods_small_logo" />
							<h4>{{item.goods_name.slice(0,8)}}...</h4>
							<h5>X{{item.num}}</h5>
						</div>
						<div class="cartbtn">
							<span @click="xxxxx">去购物车</span>
						</div>
					</div>
					<div class="null" v-show="isnull">
						<img src="img/cart-empty-new.png" />
						<span>购物车还是空的!</span>
					</div>

				</div>
			</div>
		</template>
		<script type="text/javascript">
			var Hub = new Vue();
			var cid;
			Vue.component('my-short', {
				data: function() {
					return {
						goodslist: []
					}
				},
				template: "#goodslist_infos",
				methods: {
					xxx: function(val) {
						var url = "goods.html?cid=" + val;
						console.log(url);
						window.location.href = url
					}
				},
				created: function() {
					axios.get('http://localhost:8080/mall/categories').then(function(ret) {
						this.goodslist = ret.data.message;
						console.log(this.goodslist)
					}.bind(this));

				}
			});

			Vue.component('my-cart', {
				data: function() {
					return {
						list: []
					}
				},
				template: "#goods_infos",
				methods: {
					tohtml: function(val) {
						var url = "goodsdetails.html?goods_id=" + val;
						console.log(url);
						window.location.href = url
					}
				},
				created: function() {
					var str = window.location.search.substr(1).split("?");
					cid = str[0].split("=")[1];
					// console.log(goods_id)
					var numReg = /^[0-9]*$/
					var numRe = new RegExp(numReg)

					axios.post('http://localhost:8080/mall/goods/search?pagenum=1&pagesize=20&cid='+cid).then(function(ret) {
						this.list = ret.data.message;
						console.log(this.list)
					}.bind(this));

				}

			});
			Vue.component('my-showcart', {
				data: function() {
					return {
						goodscartlist: [],
						cartflag: false,
						isfull: true,
						isnull: false,

					}
				},
				template: "#goodscartlist_infos",
				methods: {
					mouseon: function() {
						this.cartflag = true;
						axios.get('http://localhost:8080/mall/goods/showCart').then(function(ret) {
							this.goodscartlist = ret.data.message;
							console.log(this.goodscartlist)
						}.bind(this));

						// console.log(this.goodscartlist)
						if (this.goodscartlist.length < 0) {
							this.isfull = false;
							this.isnull = true;
						}
					},
					mouseover: function() {
						this.cartflag = false
					},
					xxxxx:function(){
						window.location.href="shopcart.html"
					}
				}
			})

			var vm = new Vue({
				el: '#app',
				data: {

				}

			});
		</script>
	</body>
</html>
